<!DOCTYPE html>
<title>Just Played</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<style>
  .ui-icon-justplayed-preview {
  	background-image: url('img/music.png');
  }
</style>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
$(function() {
  $.getJSON('justplayed/networks', function(data) {
    var networks = [];
    $.each(data, function(i, network) {
      networks.push('<li>'
      	+ (network.nowplaying.length ? ('<a href="#' + network.id + '">') : '')
      	+ '<img src="' + network.image + '">'
      	+ '<h1>' + network.title + '</h1>'
      	+ '<p>' + network.nowplaying.length + ' recent tracks</p>'
      	+ (network.nowplaying.length ? '</a>' : '')
      	+ '</li>');
      var tracks = [];
      $.each(network.nowplaying, function(j, track) {
        tracks.push('<li data-icon="false">'
          + '<a href="justplayed/purchase?title=' + encodeURIComponent(track.title) + '&artist=' + encodeURIComponent(track.artist) + '" data-ajax="false">'
          + '<img src="' + (track.image ? track.image : 'img/cd.gif') + '">'
          + '<h1>' + track.title + '</h1>'
          + '<p>' + track.artist + '</p>'
          + '</a>'
          + (track.playlist ? ('<a href="justplayed/preview?playlist=' + encodeURIComponent(track.playlist) + '" data-ajax="false" data-icon="justplayed-preview">Preview track</a>') : '')
          + '</li>');
      });
      $('#' + network.id + ' h2').html(network.title + (network.onair ? (': ' + network.onair.title) : ''));
      $('#' + network.id + ' ul').html(tracks.join('')).listview();
    });
    $('#home ul').html(networks.join('')).listview();
  });
});
</script>
<body> 
  <div data-role="page" id="home" data-theme="b">
    <div data-role="header">
      <a href="#help" data-icon="info" data-iconpos="notext" class="ui-btn-right" data-rel="dialog">Help</a>
      <h1>Just Played</h1>
    </div>
    <div data-role="content">
      <ul id="networks" data-role='list-view' data-inset='true'></ul>
    </div>
  </div>
  <div data-role="page" id="help">
    <div data-role="header" data-theme="b">
      <h1>Help</h1>
    </div>
    <div data-role="content" data-theme="b">
      <p><b>Just Played</b> shows you the latest tracks played on the BBC's music radio stations
      <p>Most recent tracks are shown at the top of the list
      <p>You can preview the track (where available) by tapping the icon to the right of the track name
      <p>Tap the track name to visit the 7digital store and buy the track
    </div>
  </div>
  <div data-role="page" id="radio1" data-theme="b">
    <div data-role="header">
      <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
      <h2><span class="onair"></span></h2>
    </div>
    <div data-role="content">
      <ul data-role='list-view'></ul>
    </div>
  </div>
  <div data-role="page" id="1xtra" data-theme="b">
    <div data-role="header">
      <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
      <h2><span class="onair"></span></h2>
    </div>
    <div data-role="content">
      <ul data-role='list-view'></ul>
    </div>
  </div>
  <div data-role="page" id="radio2" data-theme="b">
    <div data-role="header">
      <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
      <h2><span class="onair"></span></h2>
    </div>
    <div data-role="content">
      <ul data-role='list-view'></ul>
    </div>
  </div>
  <div data-role="page" id="6music" data-theme="b">
    <div data-role="header">
      <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
      <h2></h2>
    </div>
    <div data-role="content">
      <ul data-role='list-view'></ul>
    </div>
  </div>
</body>
